<template>
  <div class="flex-row space-around">
    <van-tabbar :active="active" @change="onChange">
      <van-tabbar-item
        v-for="(tab, index) in tabs" 
        :key="index" 
        :icon="tab.icon" 
        >{{tab.name}}
      </van-tabbar-item>
    </van-tabbar>
  </div>
</template>

<script>
import { mapState } from 'vuex'
export default {
  data() {
    return {
      tabs: [
        {
          name: "发现",
          icon: "home-o",
          path: "index"
        },
        {
          name: "活动",
          icon: "fire-o",
          path: "activity"
        },
        {
          name: "兴趣",
          icon: "flag-o",
          path: "hobby"
        },
        {
          name: "用户",
          icon: "friends-o",
          path: "user"
        }
      ]
    }
  },
  computed: mapState({
    active: state => state.tabIndex,
  }),
  methods: {
    onChange(event) {
      const index = event.detail
      const path = this.tabs[index].path
      const url = `/pages/${path}`
      uni.switchTab({
        url
      })
    }
  }
}
</script>

<style lang="less" scoped>

</style>